<template>
  <div>
    <div class="hot__history_wrapper">
      <div class="hot__history__header">
        <h3>历史记录</h3>
        <van-icon name="delete-o" @click="handelClearHistory" />
      </div>
      <div class="hot__history__body" v-show="isShow">
        <van-tag
          plain
          type="default"
          v-for="item in historyKeywordList"
          :key="item"
          @click="handelTagClick(item)"
          >{{ item }}</van-tag
        >
      </div>
    </div>

    <div class="hot__search_wrapper">
      <div class="hot__search__header">
        <h3>热门搜索</h3>
      </div>
      <div class="hot__search__body">
        <van-tag
          plain
          type="default"
          v-for="(item, index) in hotKeywordList"
          :key="index"
          :class="{ ishot: item.is_hot === 1 ? true : false }"
          @click="handelTagClick(item.keyword)"
          >{{ item.keyword }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
import { ClearHistory } from '../request/api.js'
export default {
  props: {
    hotKeywordList: {
      type: Array,
      defalut() {
        return []
      }
    },
    historyKeywordList: {
      type: Array,
      defalut() {
        return []
      }
    }
  },
  methods: {
    handelTagClick(item) {
      this.$emit('handelTagClick', item)
    },
    handelClearHistory() {
      this.isShow = false
      ClearHistory().then(res => {
        if (res.errno === 0) {
          this.$toast.success('删除成功')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.hot__history_wrapper {
  background-color: #fff;
  padding: 0.1rem;
  margin-bottom: 0.2rem;
  .hot__history__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.24rem;
    h3 {
      font-size: 0.2rem;
    }
  }
  .hot__history__body {
    margin-top: -0.01rem;
    padding-top: 0.1rem;

    .van-tag {
      margin-right: 0.1rem;
      margin-bottom: 0.05rem;
      font-size: 0.14rem;
      letter-spacing: 0.02rem;
    }
  }
}

.hot__search_wrapper {
  background-color: #fff;
  padding: 0.1rem;
  .hot__search__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.24rem;
    h3 {
      font-size: 0.2rem;
    }
  }
  .hot__search__body {
    margin-top: -0.01rem;
    padding-top: 0.1rem;
    .van-tag {
      margin-right: 0.1rem;
      font-size: 0.14rem;
      letter-spacing: 0.02rem;
      margin-bottom: 0.05rem;
    }
    .ishot {
      color: red;
    }
  }
}
</style>
